<template>
<!-- svg外层容器节点 -->
  <svg :style="{width, height}">
    <use  :fill="color" :xlink:href="prefix+name"></use>
  </svg>
</template>

<script setup lang="ts">
import { withDefaults } from 'vue';
// 接收父组件传递过来的参数
withDefaults(defineProps<{
  // 前缀
  prefix?: string,
  // 图标名称
  name: string,
  // 颜色
  color?: string,
  // 大小
  width?: string,
  height?: string,
}>(), {
  prefix: () => '#icon-',
  color: () => '',
  width: () => '16px',
  height: () => '16px'
})

</script>

<style  scoped>
  
</style>
